<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 边框表格</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>
    <button
      type="button"
      class="btn btn-default"
      data-toggle="modal"
      data-target="#myModal"
    >
      增加
    </button>
    <input
      id="searchName"
      type="text"
      class="input input-search"
      placeholder="请输入搜索名称"
    />
    <input
      id="searchCity"
      type="text"
      class="input input-search"
      placeholder="请输入搜索城市"
    />
    <button id="searchBtn" type="button" class="btn btn-default">搜索</button>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
      </tbody>
    </table>

    <!-- 模态框（Modal） -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">新增</h4>
          </div>
          <div class="modal-body">
            <p>名称：<input id="dataName" type="text" /></p>
            <p>城市：<input id="dataCity" type="text" /></p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-default cancelBtn"
              data-dismiss="modal"
            >
              关闭
            </button>
            <button type="button" class="btn btn-primary confirm-add">
              提交更改
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div
      class="modal fade"
      id="updateModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">修改</h4>
          </div>
          <div class="modal-body">
            <p>名称：<input id="updateName" type="text" /></p>
            <p>城市：<input id="updateCity" type="text" /></p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-default cancelBtn"
              data-dismiss="modal"
            >
              关闭
            </button>
            <button type="button" class="btn btn-primary confirm-update">
              提交更改
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
    <script>
      // 数据
      let data = [
        { id: 1, name: "李四", city: "重庆" },
        { id: 2, name: "张三", city: "成都" },
      ];
      let copyData = $.extend(true, [], data);
      console.log("copyData", copyData);
      // Tbody动态渲染
      function renderTbody(data) {
        // 清空页面
        $("tbody").empty();

        for (let i = 0; i < data.length; i++) {
          const dataId = data[i].id;
          const dataName = data[i].name;
          const dataCity = data[i].city;

          console.log("dataName", dataName);

          $("tbody").append(`
          <tr>
          <td>${dataName}</td>
          <td>${dataCity}</td>
          <td>
            <button type="button" class="btn btn-danger del" data-id="${dataId}">删除</button>
            <button type="button" class="btn btn-info update" data-id="${dataId}" data-toggle="modal"
      data-target="#updateModal">修改</button>
          </td>
        </tr>
    `);
        }
      }
      renderTbody(data);

      // 删除
      $("tbody").on("click", ".del", (event) => {
        if (window.confirm("您确定要删除数据吗?")) {
          var id = parseInt(event.target.dataset.id);
          for (let i = 0; i < data.length; i++) {
            if (data[i].id === id) {
              data.splice(i, 1);
              break;
            }
          }
          // 基于新的数据重新渲染
          renderTbody(data);
        }
      });

      // 新增
      $(".confirm-add").on("click", function (event) {
        // 获取input的值
        const name = $("#dataName").val();
        const city = $("#dataCity").val();
        console.log({ city, name });
        // 判断为空
        if (!name || !city) {
          alert("请填写完整的表单");
          return;
        }
        // 获取用户输入的值
        var userInfo = {
          id: data.length ? data[data.length - 1].id + 1 : 1,
          name,
          city,
        };

        // 添加到data这个数据里面
        data.push(userInfo);
        // 重新渲染
        renderTbody(data);
        // 清空input里面的数据
        $("#dataName").val("");
        $("#dataCity").val("");
        // 隐藏
        $("#myModal").modal("hide");
      });

      // 修改
      $("tbody").on("click", ".update", function (event) {
        let id = parseInt($(event.target).attr("data-id"));
        // 找到对应学生的数据，然后填到input里
        for (let i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            $("#updateName").val(data[i].name).text();
            $("#updateCity").val(data[i].city).text();
          }
        }

        // 确认修改
        $(".confirm-update").on("click", (event) => {
          // 获取input的值
          const name = $("#updateName").val();
          const city = $("#updateCity").val();

          console.log({ city, name });
          // 修改input里面的值
          for (let i = 0; i < data.length; i++) {
            if (data[i].id === id) {
              data[i].name = name;
              data[i].city = city;
            }
          }
          // 重新渲染
          renderTbody(data);
          // 隐藏
          $("#updateModal").modal("hide");
        });
      });

      // 搜索
      $("#searchBtn").on("click", function (event) {
        // 获取名称
        const name = $("#searchName").val();
        // 获取城市
        const city = $("#searchCity").val();

        const searchData = [];
        for (let i = 0; i < copyData.length; ++i) {
          const item = copyData[i];
          // 如果为空  都添加
          // 如果name 包含字符串 添加

          // includes 进行模糊搜索
          // data[i].name === name
          const condition =
            (!name || item.name.includes(name)) &&
            (!city || item.city.includes(city));
          if (condition) {
            searchData.push(item);
          }
        }
        data = searchData;
        // console.log(data);
        // console.log(searchData);
        // 搜索后  原数据没有发生改变，到时 分页的时候会有问题
        renderTbody(searchData);
      });
    </script>
  </body>
</html>
